<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
        margin: 0 auto;
        width: 50%;
        text-align: center;
        }	
    
        #circle{
            transition: all .5s;
        }
    </style>
</head>
<body>
    <div class="container">
    <svg width="200" height="200" viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="#e0e0e0" />
        <circle id="circle" stroke-linecap="round"  cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="#FFE60F" stroke-dasharray="0 314" transform="rotate(-90, 100, 100)"/>
    
        <text x="100" y="100" fill="#6b778c" text-anchor="middle" dominant-baseline="central">
        <tspan id="percent">0</tspan>%
        </text> 
    </svg>
    <div>
    <button onclick="add()">add</button>
    </div>
    </div> 
</body>
<script>
let circle = document.getElementById('circle');
  let percent = document.getElementById('percent');
 
  let radius = 50;
  let v = 0.00;
 
  function add() {
    let a = window.prompt();
    v = a/100;
    if (v >= 1) {
      v = 1;
    }
    if (v < 0) {
      v = 0;
    }
    set(v);
  }
 
  function set(p) {
    let total = Math.PI * 2 * radius;
    percent.innerHTML = Math.round(p * 100);
    let str = ''
    if(p>=1){
        str = `${(p * total)-12} ${(total * (1-p))+12 }`;
    }else{
        str = `${(p * total)} ${total * (1-p)}`;
        console.log(p);
        // str = `${(p * total)} ${total * (1-p)}`;
    }
    circle.style['stroke-dasharray'] = str;
  }
</script>
</html>